<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {

				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.clearfix::after {
				content: '';
				display: table;
				clear: both;
			}

			.slider-wrap {
				width: 500px;
				margin: 50px auto;
			}

			.slider .slider-item {
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #000;
				cursor: pointer;
			}

			.slider .slider-item.cur {
				background-color: #000;
				color: #fff;
			}

			.thumbs {
				position: relative;
				width: 500px;
				height: 300px;
				border: 1px solid #000;
			}

			.thumbs .thumbs-item {
				position: absolute;
				display: none;
				top: 50%;
				left: 50%;
				margin-top: -33px;
				margin-left: -15px;
				font-size: 50px;
			}

			.thumbs .thumbs-item.active {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="slider-wrap">
			<div class="slider">
				<ul class="slider-list clearfix">
					<li class="slider-item cur">
						选项卡1
					</li>
					<li class="slider-item">
						选项卡2
					</li>
					<li class="slider-item">
						选项卡3
					</li>
				</ul>
			</div>
			<div class="thumbs">
				<span class="thumbs-item active">1</span>
				<span class="thumbs-item">2</span>
				<span class="thumbs-item">3</span>
			</div>
		</div>

		<script src="./01.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var slider = new Slider({
				sliderItem: 'slider-item',
				thumbsItem: 'thumbs-item'
			});
		</script>
	</body>
</html>
